<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='mobile-web-app-capable' content='yes'>
    <meta name='apple-mobile-web-app-capable' content='yes'>

    <meta name='twitter:card' content='summary'>
    <meta name='twitter:title' content='WebXR Samples'>
    <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

    <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
    <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

    <link rel='stylesheet' href='../css/stylesheet.css'>
    <link rel='stylesheet' href='../css/pygment_trac.css'>

    <style>
      article {
        position: relative;
        padding: 0.5em;
        background-color: rgba(255, 255, 255, 0.90);
        margin-bottom: 1em;
        border-radius: 3px;
      }

      article h3 {
        font-size: 1.0em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article h3::before {
        display: inline-block;
        content: attr(data-index) ' - ';
        font-weight: bold;
        white-space: nowrap;
        margin-right: 0.2em;
      }

      article h4 {
        position: absolute;
        right: 0.5em;
        top: 0.5em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article p {
        margin: 0.5em;
      }

      article .links {
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      article a {
        display: inline-block;
      }

      article a:not(:first-child)::before {
        display: inline-block;
        content: '•';
        font-weight: bold;
        white-space: nowrap;
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      .github-link {
        font-size: 0.8em;
      }

      .wordmark img {
        width: 70%;
      }
    </style>

    <!--[if lt IE 9]>
    <script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
    <![endif]-->
    <title>WebXR - Proposals</title>
  </head>
  <body>

    <div class='container' id='container'>
      <header class='header'>
        <div id='nav'>
            <a href='../'>Samples</a>
            <a href='../layers-samples/'>Layers Samples</a>
            <a href='../webgpu/'>WebGPU Samples</a>
            <a href='./' class='selected'>Proposals</a>
            <a href='../tests/'>Test Pages</a>
            <a href='../report/'>Report</a>
        </div>

        <h1>
          <a href='' class='wordmark'>
            <img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
          </a>
        </h1>
        <h2 class='tagline'>Proposals</h2>
      </header>

      <main class='main' id='main'>
        <p>These pages test features which have been proposed and are in development but have
          not yet been adopted into the core WebXR Device API. They may have varying support
          across WebXR-compatible browsers, and the APIs presented here are assumed to be
          in flux.<br/>

        <script>
          let pages = [
            { title: 'AR Depth Sensing - GPU access', category: 'AR',
              path: 'phone-ar-depth-gpu.html',
              description: 'Demonstrates use of a depth API in an immersive-ar session. ' +
                           'The data will be uploaded to the GPU & accessed from a shader to visualize the depth map.' },

            { title: 'AR Depth Sensing - CPU access', category: 'AR',
              path: 'phone-ar-depth.html',
              description: 'Demonstrates use of a depth API in an immersive-ar session. ' +
                           'The data will be accessed on the CPU.' },

            { title: 'AR Plane Detection', category: 'AR',
              path: 'plane-detection.html',
              description: 'Demonstrates use of the plane detection API in an immersive-ar session. ' +
                           'Implements JavaScript-level hit-test and leverages the Anchors API.' },

            { title: 'AR Mesh Detection', category: 'AR',
              path: 'mesh-detection.html',
              description: 'Demonstrates use of the mesh detection API in an immersive-ar session. ' +
                           'Implements JavaScript-level hit-test on the meshes and leverages the Anchors API.' },

          ];

          let mainElement = document.getElementById("main");

          // Append an element for every item in the pages list.
          for (var i = 0; i < pages.length; ++i) {
            var page = pages[i];

            let article = document.createElement('article');

            let title = document.createElement('h3');
            title.setAttribute('data-index', i + 1);

            let titleLink = document.createElement('a');
            titleLink.href = page.path;
            titleLink.textContent = page.title;
            title.appendChild(titleLink);
            article.appendChild(title);

            let category = document.createElement('h4');
            category.textContent = page.category;
            article.appendChild(category);

            let description = document.createElement('p');
            description.textContent = page.description;
            article.appendChild(description);

            let links = document.createElement('div');
            links.classList.add('links');

            let sourceLink = document.createElement('a');
            sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/main/proposals/' + page.path;
            sourceLink.textContent = 'Source';
            links.appendChild(sourceLink);

            article.appendChild(links);

            mainElement.appendChild(article);
          }
        </script>
      </main>

      <br/>

      <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

      <footer class='footer'>
      </footer>
    </div>
  </body>
</html>
